import { FC, useCallback, useEffect, useState } from 'react';
import './index.scss';

interface OurLoadingProps {
  className?: string;
  style?: React.CSSProperties;
  isShowLoading: boolean;
}

const OurLoading: FC<OurLoadingProps> = (props) => {
  const [showLoading, setShowLoading] = useState(false);

  const init = useCallback(() => {
    setShowLoading(props.isShowLoading);
  }, [props.isShowLoading]);

  useEffect(() => {
    init();
  }, [init]);

  return (
    <div
      className={
        (props.className || '') + (showLoading ? 'ourLoading' : 'hideLoading')
      }
      style={props.style}
    >
      <div className="loader">
        <div className="loader-square"></div>
        <div className="loader-square"></div>
        <div className="loader-square"></div>
        <div className="loader-square"></div>
        <div className="loader-square"></div>
        <div className="loader-square"></div>
        <div className="loader-square"></div>
      </div>
    </div>
  );
};

export default OurLoading;
